<template>
    
             <!-- 进度条 -->
        

    <van-form @submit="onSubmit">
        <van-nav-bar
            left-text="返回"
            left-arrow
            @click-left="onBack"
            title="发现"
        />
        <van-progress
            :percentage="progress"
            style="margin-bottom: 10px"
        />
        <div style="width: 100%; height: 1.5rem"></div>

        <van-cell-group inset>
            <van-field
                v-model="message"
                name="desc"
                rows="2"
                autosize
                :rules="[
            {required: true, message: '请输入描述'},
            ]"
                type="textarea"
                maxlength="50"
                placeholder="请输入描述"
                show-word-limit
            >
                <template #label>
                    <div>描述</div>
                </template>
            </van-field>
        </van-cell-group>

        <van-field name="uploader" >
            <template #label>
                <div>图片上传</div>
            </template>
            <template #input>
                <van-uploader v-model="imgs"  :max-count="3" />
            </template>
        </van-field>

        <div class="box">
            <div class="item">
                <div class="product">
                    <div class="left">
                        <img src="/assets/images/6.jpg" alt="Product Image" />
                    </div>
                    <div class="right">
                        <div class="name">
                            针织衫春秋季新款女装毛衣2020春温柔风黑色长袖短款上衣开衫外套
                        </div>
                        <div class="price">￥22.00</div>
                    </div>
                </div>
            </div>
        </div>

        <div style="width: 80%; margin: 2em auto">
            <van-button
                :loading="loading"
                round
                block
                color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
                native-type="submit"
                >提交</van-button
            >
        </div>
    </van-form>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const business = proxy.$business;

const message = ref("");
const imgs = ref([]);
const loading = ref(false);
const proid = ref(proxy.$route.query.proid ?? 0);


console.log("🚀 ~ file: add.vue:12 ~ business:", business);

const onSubmit =async (values) => {
    
    
    let params = {
        proid:proid.value,
        busid:business.value.id,
        content:values.desc,
        imgs:[]
    }
    let imgs = values.uploader;

    if(imgs && imgs.length > 0){
        for (let index = 0; index < imgs.length; index++) {
            params.imgs.push(imgs[index].file);
        }
    }
    
    
    let result = await proxy.$http.upload({
        url:'/share/add',
        params
    })
    
    if(result.code === 1)
    {
        proxy.$showSuccessToast(result.msg);

        proxy.$router.push({ path: '/share' });
    }else{
        proxy.$warning(result.msg);
    }
};

// 计算进度
const progress = computed(() => {
    return (
        50 * (message.value.trim().length > 0) + 50 * (imgs.value.length > 0)
    );
});

const onBack = () => proxy.$router.back();
</script>

<style scoped>
.box {
    width: 95%;
    margin: 15px auto 0;
}

.item {
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
    overflow: hidden;
}

.product {
    display: flex;
    background: #f9f9f9;
    border-radius: 10px;
}

.left {
    width: 20%;
    margin-right: 2%;
    flex-shrink: 0;
    border-radius: 9px 0 0 9px;
}

.left img {
    display: block;
    object-fit: contain;
    width: 100%; /* 确保图片宽度适应容器 */
}

.right {
    width: calc(100% - 22%); /* 考虑到左边栏的宽度和右边的间距 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    margin: 5px 0 8px;
}

.name,
.price {
    color: #222;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
}

.price {
    color: #fe6600;
    font-size: 14px;
}
.van-progress{
    margin-top: 10px;
}
</style>
